import React, { Component } from 'react'
import {connect} from 'dva'
import style from './index.css'
import {Row,Col,message,Card } from 'antd'
import {queryDetail} from '../../../services/repairManage'
const { Meta } = Card;


class Detail extends Component {
    constructor(props) {
        super(props);
        this.state={
            detailList: []
        }
    }
    async componentWillMount(){
        const id = location.pathname.split('/')[location.pathname.split('/').length-1];
        console.log(id)
        const res = await queryDetail(id);
        console.log(res)
        if(res.code === '200'){
            this.setState({
                detailList:res.data,
            })
        }else{
            message.error(res.msg);
        }
    }
  render() {
      const {detailList} = this.state;
      console.log(detailList);
    return (
      <div className={style.content}>
        <Row>
            <Col span={15} className={style.col}>
                <span className={style.icon}>待报修详情</span>
            </Col>
            <Col span={3} className={style.col}>
            </Col>
            <Col span={3} className={style.col}>
            </Col>
        </Row>
        <Row>
            <Col span={4}></Col>
            <Col span={8}>
                <Row>
                    <Col span={4}>学校：</Col>
                    <Col span={12}>{detailList.school}</Col>
                </Row>
            </Col>
            <Col span={8}>
                <Row>
                    <Col span={4}>院系：</Col>
                    <Col span={12}>{detailList.department}</Col>
                </Row>
            </Col>
            <Col span={4}></Col>
        </Row>
        <Row className={style.render}>
            <Col span={4}></Col>
            <Col span={8}>
                <Row>
                    <Col span={4}>专业：</Col>
                    <Col span={12}>{detailList.specialty}</Col>
                </Row>
            </Col>
            <Col span={8}>
                <Row>
                    <Col span={4}>姓名：</Col>
                    <Col span={12}>{detailList.pname}</Col>
                </Row>
            </Col>
            <Col span={4}></Col>
        </Row>
        <Row className={style.render}>
            <Col span={4}></Col>
            <Col span={8}>
                <Row>
                    <Col span={5}>创建的时间：</Col>
                    <Col span={12}>{detailList.cdate}</Col>
                </Row>
            </Col>
            <Col span={8}>
                <Row>
                    <Col span={4}>电话：</Col>
                    <Col span={12}>{detailList.phone}</Col>
                </Row>
            </Col>
            <Col span={4}></Col>
        </Row>
        <Row className={style.render}>
            <Col span={4}></Col>
            <Col span={8}>
                <Row>
                    <Col span={4}>住址：</Col>
                    <Col span={12}>{detailList.position}</Col>
                </Row>
            </Col>
            <Col span={8}>
            </Col>
            <Col span={4}></Col>
        </Row>
        <Row className={style.second}>
            <Row className={style.render}>
                <Col span={4}></Col>
                <Col span={8}>
                    <Row>
                        <Col span={4}>报修名称：</Col>
                        <Col span={12}>{detailList.repairname}</Col>
                    </Row>
                </Col>
                <Col span={8}>
                </Col>
                <Col span={4}></Col>
            </Row>
            <Row className={style.render}>
                <Col span={4}></Col>
                <Col span={8}>
                    <Row>
                        <Col span={4}>报修内容：</Col>
                        <Col span={12}>{detailList.repaircontent}</Col>
                    </Row>
                </Col>
                <Col span={8}>
                </Col>
                <Col span={4}></Col>
            </Row>
            <Row className={style.render}>
                <Col span={4}></Col>
                <Col span={8}>
                    <Row>
                        <Col span={4}>图片：</Col>
                        <Col span={12}>
                            <Card
                                hoverable
                                style={{ width: 240 }}
                                cover={<img alt="example" src={detailList.repairimgurl} />}
                            >
                                <Meta
                                description="报修图片"
                                />
                            </Card>
                        </Col>
                    </Row>
                </Col>
                <Col span={8}>
                </Col>
                <Col span={4}></Col>
            </Row>
            <Row className={style.footer}></Row>
        </Row>
      </div>
    )
  }
}
export default Detail
